{% extends 'layout/base.twig' %}

{% block content %}
<div class="row-fluid">

<div class="span9">
  <div class="row-fluid">

    <div class="span5">
      <h2>选择查询条件</h2>
      <form>
        <textarea style="width: 300px;height: 80px;" id="selection">{"meta.url" : "/index.php"}</textarea>
      </form>
    </div><!--/span-->


    <div class="span5">
      <h2>选择显示的参数</h2>
      <form>
        <textarea style="width: 300px;height: 80px;" id="retrieve">{"meta" : true, "profile.main()" : true}</textarea>
      </form>
    </div><!--/span-->
    
    <div class="span2">
      <h2>帮助</h2>
      <p>别担心, <a href="{{ url('custom.help') }}">有指南</a>。</p>
    
    </div><!--/span-->
  
  </div><!--/row-->
    <div class="row-fluid">

    <div class="span12">
        <div class="btn btn-large" style="display: block; margin-left: auto; margin-right: auto; width: 150px;" id="runbutton">运行</div>
		<div style="display: block; margin-left: auto; margin-right: auto; width: 150px; display: none" id="loading"><img src="{{ static('img/loading.gif') }}"></div>
    </div><!--/span-->
  
  </div><!--/row-->
  <table class="table table-hover" id="results">
    <thead>
        <tr>
            <th>请求地址</th>
            <th>时间</th>
            <th><span class="tip" title="执行时间	">执行时间</span></th>
            <th><span class="tip" title="CPU时间">CPU时间</span></th>
            <th><span class="tip" title="内存占用">内存占用</span></th>
            <th><span class="tip" title="内存峰值">内存峰值</span></th>
        </tr>
    </thead>
    <tbody>
    {% for key, value in profile %}
    <tr>
        <td>{{ key }}</td>
        <td>{{ value.ct | number_format }}</td>
        <td>{{ value.ewt | number_format }} <span class="units">µs</span></td>
        <td>{{ value.ecpu |number_format }} <span class="units">µs</span></td>
        <td>{{ value.emu |number_format }} <span class="units">bytes</span></td>
        <td>{{ value.epmu |number_format }} <span class="units">bytes</span></td>
        <td>{{ value.wt | number_format }} <span class="units">µs</span></td>
        <td>{{ value.cpu | number_format }} <span class="units">µs</span></td>
        <td>{{ value.mu | number_format }} <span class="units">bytes</span></td>
        <td>{{ value.pmu | number_format }} <span class="units">bytes</span></td>

    </tr>
    {% endfor %}
    </tbody>
</table>
</div><!--/span-->
</div><!--/row-->
{% endblock %}


{% block jsfoot %}
<script type="text/javascript">
    $('#runbutton').click(function () {
        $("#runbutton").hide();
        $("#loading").show();
        var query = $('#selection').val();
        var retrieve = $('#retrieve').val();
        $.ajax({
            url: '{{ url("custom.query") }}',
            type: 'POST',
        
            data: {'query' : query, 'retrieve' : retrieve},
            success: function(data) {
                    $('#results tbody').empty();
                    $("#runbutton").show();
                    $("#loading").hide();
                    if (data.hasOwnProperty('error'))
                    {
                      console.log(data.error);
                      if (data.error.hasOwnProperty('query'))
                      {
                        $('#selection').animate(
                        { backgroundColor: '#FFD9D9'}, 
                        800, 
                        function() {
                        $(this).animate({ backgroundColor: '#FFF'});
                        }
                        );
                      }
                      
                      if (data.error.hasOwnProperty('retrieve'))
                      {
                        $('#retrieve').animate(
                        { backgroundColor: '#FFD9D9'}, 
                        800, 
                        function() {
                        $(this).animate({ backgroundColor: '#FFF'});
                        }
                        );
                      }
                    }else  {
                      $.each( data, function(i, n){
                         $("#results tbody").append('<tr><td>' + n.meta.url + '</td><td>' + n.meta.SERVER.REQUEST_TIME + '</td><td>' + n.profile['main()'].wt + '</td><td>' + n.profile['main()'].cpu + '</td><td>' + n.profile['main()'].mu + '</td><td>' + n.profile['main()'].pmu + '</td></tr>');
                      });
                    }
                    

        
            }
        });
    })
</script>
{% endblock %}
